<template>
	<div v-loading="loading">
		<el-form-item v-if="!sendStatus" v-show="hasCityData.length==0">
			<el-button size="small" type="success" @click.native="select">选择{{typeText}}</el-button>
			<el-dialog title="列表" :visible.sync="dialogTableVisible">
				<el-table @current-change="handleSelectionChange" tooltip-effect="dark" ref="multipleTable" :data="girdData" highlight-current-row width="700" height="300">
					<el-table-column label="名称" width="200px" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-radio v-model="isSelected" :label="scope.$index">{{scope.row.supplierName}}</el-radio>
						</template>
					</el-table-column>
					<el-table-column label="类型">
						<template slot-scope="scope">
							<span>{{scope.row.supplierType | filterSupplierType}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="level" label="等级"></el-table-column>
					<el-table-column prop="provcity" label="地区"></el-table-column>
				</el-table>
				<div class="page_size">
					<el-button class="select-submit-btn" @click="submitSelect" type="success">确认</el-button>
				</div>
			</el-dialog>
		</el-form-item>
        <el-form-item v-else v-show="sendUpdateData.length == 0">
            <el-button type="success" @click.native="select">选择{{typeText}}</el-button>
            <el-dialog title="列表" :visible.sync="dialogTableVisible">
				<el-table @current-change="handleSelectionChange" tooltip-effect="dark" ref="multipleTable" :data="girdData" highlight-current-row width="700" height="300">
					<el-table-column label="名称" width="200px" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-radio v-model="isSelected" :label="scope.$index">{{scope.row.supplierName}}</el-radio>
						</template>
					</el-table-column>
					<el-table-column label="类型">
						<template slot-scope="scope">
							<span>{{scope.row.supplierType | filterSupplierType}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="level" label="等级"></el-table-column>
					<el-table-column prop="provcity" label="地区"></el-table-column>
				</el-table>
                <div class="page_size">
                    <el-button class="select-submit-btn" @click="submitSelect" type="success">确认</el-button>
                </div>
            </el-dialog>
        </el-form-item>
		<el-form-item :label="'已选择'+typeText">
			<el-table v-if="!sendStatus" :data="hasCityData" border style="width: 70%;">
				<el-table-column show-overflow-tooltip prop="supplierName" label="名称">
				</el-table-column>
				<el-table-column label="类型">
						<template slot-scope="scope">
							<span>{{scope.row.supplierType | filterSupplierType}}</span>
						</template>
				</el-table-column>
				<el-table-column prop="level" label="等级"></el-table-column>
				<el-table-column prop="provcity" label="地区"></el-table-column>
				<el-table-column label="操作" width="120px">
					<template slot-scope="scope">
						<el-button @click="deleteItem(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
						</template>
				</el-table-column>
			</el-table>

            <el-table v-else :data="sendUpdateData" border style="width: 70%;">
				<el-table-column show-overflow-tooltip prop="supplierName" label="名称">
				</el-table-column>
				<el-table-column prop="mobile" label="号码"></el-table-column>
				<el-table-column prop="name" label="联系人"></el-table-column>
                <el-table-column label="操作" width="120px">
                    <template slot-scope="scope">
                        <el-button @click="deleteItem2(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
                        </template>
                </el-table-column>
            </el-table>
		</el-form-item>
	</div>
</template>
<script>
import qs from "qs";
export default {
  data() {
    return {
      loading: false,
      dialogTableVisible: false,
      girdData: [],
      hasCityData: [], //已经存在于服务器的地区数据
      multipleSelection: [],
      hasCityId: null, //已存在/选中的数据，只有ID
      id: 0,
      isSelected: "",
      categorParams: {
        numPerPage: 10,
        order: "asc",
        pageNum: 1,
        supplierStateEnum: "OPEN"
      },
      typeText: ""
    };
  },
  props: {
    sendStatus: "",
    sendUpdateData: "",
    type: ""
  },
  watch: {
  },
  mounted() {
    console.log(this.type);
        this.categorParams.supplierType = this.type.split(",");
        var typeArr = [
          {
            type: "INVESTOR",
            name: "投资人"
          },
          {
            type: "RESTAURANT",
            name: "餐厅"
          },
          {
            type: "SUPPLIER",
            name: "供应商"
          }
        ];
        var typeTextArr = [];
        for (var i in typeArr) {
			for(var j in this.categorParams.supplierType)
			if (typeArr[i].type == this.categorParams.supplierType[j]) {
            typeTextArr.push(typeArr[i].name);
          }
        }
        this.typeText = typeTextArr.join(",");
    console.log(this.typeText, this.categorParams.supplierType);
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 1) {
        console.log(val);
      }
    },
    // 删除单个供应商
    deleteItem(id) {
      for (var i in this.hasCityData) {
        if (this.hasCityData[i].id == id) {
          this.hasCityData.splice(i, 1);
          delete this.hasCityId;
        }
      }
    },
    // 修改时的删除
    deleteItem2(id) {
      console.log(this.sendUpdateData[0].id == id);
      if (this.sendUpdateData[0].id == id) {
        this.sendUpdateData = [];
        delete this.hasCityId;
      }
    },
    // 商品选择框的确认功能
    submitSelect() {
      let groupId = this.multipleSelection.id;
      if (this.sendStatus) {
        this.sendUpdateData.push(this.multipleSelection);
      } else {
        this.hasCityData.push(this.multipleSelection);
      }
      this.hasCityId = groupId;
      this.isSelected = "";
      this.dialogTableVisible = false;
      this.sendData();
    },
    // 点了“选择商品”按钮之后弹出框
    select() {
      this.loading = true;
      this.hasCityId = [];
      this.girdData = [];
      this.dialogTableVisible = true;
      this.$post("supplierQuery", this.categorParams).then(res => {
        this.girdData = res.data.rows;
      });
      this.loading = false;
    },
    // 发送数据给父组件
    sendData() {
      this.$emit("sendGoodsData", this.hasCityId, this.hasCityData);
    }
  }
};
</script>
<style>
.el-table th > .cell,
.el-table .cell {
  text-align: left !important;
}

.page_size {
  text-align: center;
  padding: 20px;
  width: 95%;
}
</style>